<template>
  <div class="app-container">
    <MForm :fields="fields" :modelValue="modelValue" @submit="search" @cancel="search">
      <template #extra>
        <el-button type="warning" @click="exportNoCheck">导出未参检</el-button>
      </template>
    </MForm>
    <el-table :data="tableData" border style="width: 100%" height="600px">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="序号" align="center" type="index" width="60" />
      <el-table-column label="组织单位" prop="organizationBaseName" width="300">
      </el-table-column>
      <el-table-column label="注册时间" prop="establishTime" width="150">
      </el-table-column>
      <el-table-column label="组织编码" prop="creditCode" width="180">
      </el-table-column>
      <el-table-column label="组织类别" prop="organizationType" width="150" align="center">
        <template #default="scope">
          <el-tag :type="scope.row.organizationType == 1 ? 'warning' : ''">
            <span class="tag">{{
              scope.row.organizationType == 1 ? '社团' : '民非'
            }}</span>
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="主管部门" align="center" prop="supervisoryUnit" />
      <el-table-column label="法定代表人/负责人" align="center" prop="legalRepresentativeName" width="180" />
      <el-table-column label="联系电话" align="center" prop="supervisoryPhone" width="180" />
    </el-table>
    <div class="pageInfo-box">
      <el-pagination v-model:current-page="params.pageNum" :page-size="params.pageSize"
        :page-sizes="[100, 200, 300, 400]" background layout="total, sizes, prev, pager, next, jumper" :total="total"
        @size-change="handleSizeChange" @current-change="search" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, inject } from 'vue'
import { fields, modelValue } from './config'
import { getNoCheckList, exportNoCheckList } from '@/api/yearCheck/index'

const tableData = ref([])
const total = ref()
// 搜索
const params = ref<any>({
  pageSize: 15,
  pageNum: 1,
})

const search = (data: any) => {
  params.value = {
    ...params.value,
    ...data
  }
  getNoCheckList(params.value).then(res => {
    tableData.value = res.rows
    total.value = res.total
  })
}

const exportNoCheck = () => {
  exportNoCheckList(modelValue).then(res => {
    const blob = new Blob([res], {
      type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
    })
    const a = document.createElement('a')
    const URL = window.URL || window.webkitURL
    const herf = URL.createObjectURL(blob)
    a.href = herf
    a.download = '未参检.xlsx'
    document.body.appendChild(a)
    a.click()
    document.body.removeChild(a)
    window.URL.revokeObjectURL(herf)
  })
}

const handleSizeChange = (data: any) => {
  params.value.pageSize = data
}
search(modelValue)

</script>
<style lang="scss" scoped>
.pageInfo-box {
  display: flex;
  justify-content: right;
  padding-top: 30px;
}
</style>
